<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>
         <link type="text/css" rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/rating/rating.css.jsf?ln=primefaces" />
        <script type="text/javascript" src="#{request.contextPath}/javax.faces.resource/rating/rating.js.jsf?ln=primefaces" />
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/bootstrap.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/hotellie.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/font-awesome.css"/>
		<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'/>
		
    </h:head>
    
    <h:body>
    
    <script>
    
    
    </script>
    
          <style>
			.ui-accordion .ui-accordion-header .ui-icon {
			    margin-top: -8px;
			    position: absolute;
			    right: 0.5em;
			    top: 50%;
			}
            .ui-listview > .ui-li-static, .ui-listview > li p{
            	white-space: normal;
            }
            .headerRow, .hmsHeader{
            	margin-bottom: 0em !important;
            }
            
            .ui-panel {
              top : none !important;
            }
          </style>
        
        
            <pm:page id="hotelsListId">
            	<pm:content>
                <h:form id="main">
                    <script type="text/javascript">

                    
            var flagStyle = true;
           
	       	$(function(){
	      		$(document).scroll(function() {
	      			var height = $(window).scrollTop();
					var some_number=10;
	      		    if(height  == 0) {
	      		    	$('.festivals').css({ top: 'inherit' });
	      		    }else{
	      		    	if(!flagStyle){
	      		    	  $('.festivals').css({ top: '0' });
	      		    	} else{
	      		    		flagStyle = false;
	      		    	}
	          		}
	      		});
	        });
	       	
	       	function makeFlagTrue(){
	       	    flagStyle = true;
	       	}

	      	
          </script>
                
                
                  <div class="row headerRow">
          			<div class="col-xs-2">
          				<a href="#panel-1" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true"></a>
						<div data-role="panel" id="panel-1" data-display="overlay">
							<ul data-role="listview" id="listview-1">
							    <li><a href="${pageContext.request.contextPath}/hms/index.xhtml">Home</a></li>
								<li><a href="item2.html">Deals</a></li>
								<li><a href="item2.html">Recently viewed Hotels</a></li>
								<li><a href="item2.html">Recently viewed Deals</a></li>
								<li><a href="item3.html">Recent searches</a></li>
				                <li><a href="about.xhtml">About</a></li>
				                <li><a href="${pageContext.request.contextPath}/hms/map/map.xhtml">Map</a></li>
				                <c:if test="${signInUserView.userLoggedIn}">
									<li><a href="#{request.contextPath}/user/userDetails.xhtml">Profile</a></li>
									<li><a href="#{request.contextPath}/user/changePassword.xhtml">Change Password</a></li>
				                    <li><h:commandLink action="#{signInUserView.logout()}" value="Longout" /></li>
							    </c:if>	
							</ul>
						</div>
          			</div>
					<div class="col-xs-3">
					    <p:commandLink action="/index.xhtml?faces-redirect=true">
						   <h3>Hotellie</h3>
						</p:commandLink>
					</div>
					<div class="col-xs-7">
						<p:link styleClass="fa fa-sort" outcome="pm:sortPage?transition=flip" />
						<p:link styleClass="fa fa-filter" outcome="pm:filterPage?transition=flip"/>
						<p:link styleClass="fa fa-search" outcome="pm:search?transition=flip" />
						
					</div>
          		  </div>
          		  
          		  <p:dialog header="Events" widgetVar="dlg1" showEffect="pop"  style="margin-left:-1.3em;">
				          		  	  	 
       		  	  	    <p:dataGrid id="cars" var="eventvar" value="#{eventListProducer.getEventList(searchView.searchBean.placeBean.placeName)}" columns="1" paginator="false" >
					        					 
					        <p:panel header="#{eventvar.eventName}" style="text-align:center">
					            <h:panelGrid columns="2" style="width:100%">
					                <p:graphicImage url="#{eventvar.imageName}" height="50"/>
					                <h:panelGrid>
					                	<h:outputText value="Add 10 people to get" style="margin-left:2em"/>
					                	<h:outputLabel value="15%" style="margin-left:2em"/>
					                	<p:commandLink value="Buy" styleClass="btn btn-success"/>
					                </h:panelGrid>
					                <p:spacer></p:spacer> 
					                <h:panelGrid columns="4" style="width:100%;margin-top:1em;">
					                <h:outputText value="Date:" style="font-weight:bold;padding-right: 0.1em;"/>
					                <h:outputText value="#{eventvar.eventSchedule.fromDate}" style="padding-right: 0.3em;">
					                <f:convertDateTime pattern="MM/dd/yyyy" />
					                </h:outputText>
					                <h:outputText value="-" />
					                <h:outputText value="#{eventvar.eventSchedule.toDate}" style="padding-left: 0.3em;">
					                <f:convertDateTime pattern="MM/dd/yyyy" />
					                </h:outputText>
					                </h:panelGrid>
					            </h:panelGrid>
					        </p:panel>
					 
					    </p:dataGrid>
       		  	  	 
       		  	  	 
				</p:dialog>
				          		
          		  <div id="festivalDiv" class="row festivals" onclick="PF('dlg1').show();">
          		  	<div class="col-xs-12">
          		  		<h5>Best Deals on below events</h5>
          		  		<ui:repeat var="image" value="#{eventListProducer.getEventList(searchView.searchBean.placeBean.placeName)}">
       		  	  		 <img  src="#{image.imageName}" alt="..."/>
       		  	  		 </ui:repeat>
       		  	  		 
          		  	</div>
       		  	  </div>
       		  	 
       		
          		  <p:dataList value="#{searchView.hotels}" var="hotel" styleClass="htlList">
	                  <div class="row searchRow">
                    	<div class="thumbnail right-caption col-xs-12">
							<div class="col-xs-3">
								<img class="col-xs-12" src="#{hotel.hotel.hotelImage.filePath}" alt="..."/>
								<div class="star">
									<h:outputLabel value="#{searchView.getStar(hotel.hotel.starRating)}" escape="false"/>
								</div>
							</div>
							<div class="col-xs-9">
								<h3 title="#{hotel.hotel.name}--#{searchView.currentMilliSecd}" style="margin-left: .5em;">#{hotel.hotel.name}--#{searchView.currentMilliSecd}</h3>
								<p:outputPanel rendered="#{hotel.hasDeal()}">
									<div class="col-xs-5 dealBox">
										<div class="col-xs-8">
											Likely to get Deal
										</div>
										<div class="col-xs-4" style="padding:0;  text-align:center">
											<h3 style="color:orange">90%</h3>
										</div>
									</div>
									<div class="col-xs-6 dealBox">
										<div class="col-xs-8">
											Add #{hotel.personCount} people more to get
										</div>
										<div class="col-xs-4" style="padding:0">
											<h3 style="color:green">#{hotel.percentOff}% OFF</h3>
										</div>
									</div>
								</p:outputPanel>
								<div class="facilities row">
									<div class="col-xs-8">
										<i class="fa fa-car"></i>
										<i class="fa fa-wifi"></i>
										<i class="fa fa-cutlery"></i>
										<i class="fa fa-plus-square"></i>
									</div>
									<div class="col-xs-4">
										<p:outputPanel rendered="#{hotel.hasDeal()}">
											<ui:remove>
											<span class="del">
												<h3>$#{hotel.liveDealData.originalPrice}</h3>
											</span>
											After #{hotel.liveDealData.afterDiscount}%
											</ui:remove>
											<h2 class="cost">$#{hotel.liveDealData.currentPrice}</h2>
										</p:outputPanel>
									</div>
								</div>
								<div class="facilities row">
									<div class="col-xs-8">
										<h:panelGrid rendered="#{hotel.hotel.hasDeal}" style="width: 100%;">
											<h3 class="deal">Hot Deal</h3>
										</h:panelGrid>
									</div>
									<div class="col-xs-4">
										<p:commandLink value="Buy" actionListener="#{searchView.gotoViewDeal(hotel.hotel)}" update=":dealView" oncomplete="PrimeFaces.Mobile.navigate('#dealView',{transition:'flip'});"  styleClass="btn btn-success"/>
									</div>
								</div>
							</div>
						</div>
	                  </div>
                  </p:dataList>                    
                  </h:form>
             	</pm:content>
            </pm:page>
            
            
             <pm:page id="search">
		           <pm:header title="Search" swatch="b" styleClass="hmsHeader">
		                <p:button outcome="pm:hotelsListId?transition=flip" value="Back" styleClass="ui-btn-left ui-btn-inline" onclick="makeFlagTrue()" />
		           </pm:header>
	             <pm:content>
	              <p:inputText id="search" value="#{searchView.searchBean.placeBean.placeName}" type="search" placeholder="Enter destination"/> 
	                    
	                    <h:panelGrid columns="2" styleClass="dateHms">
	                      <p:panel header="Check-in Date">
	                  	     <p:calendar pattern="MM/dd/yyyy"/>
	                  	  </p:panel>
	                  	  <p:panel header="Check-out Date">
	                  	      <p:calendar pattern="MM/dd/yyyy"/>
	                  	  </p:panel>    
	                    </h:panelGrid>
	                    
	                    <p:commandButton value="Search" icon="search" actionListener="#{searchView.search}"  outcome="pm:first?transition=flip"/>
                    </pm:content>
            </pm:page>
            
             <pm:page id="sortPage">
             
	           <pm:header id="sortHead" title="Sort" swatch="b" styleClass="hmsHeader">
	                <p:button id="sortButtonResult" outcome="pm:hotelsListId?transition=flip" value="back" styleClass="ui-btn-left ui-btn-inline" onclick="makeFlagTrue()" />
	           </pm:header>
	           <pm:content>
	             <h:form>
	               <p:selectOneRadio id="sortRadio" value="#{searchView.searchBean.hotelSorting}">
							<f:selectItem itemLabel="Popularity" itemValue="POPULARITY" />
							<f:selectItem itemLabel="Price(low to high)" itemValue="PRICE_LOW_TO_HIGH" />
							<f:selectItem itemLabel="Star(5 to 0)" itemValue="STAR_FIVE_ZERO" />
							<f:selectItem itemLabel="Star(0 to 5)" itemValue="STAR_ZERO_TO_FIVE" />
							<f:selectItem itemLabel="Distance" itemValue="DISTANCE" />
							<f:selectItem itemLabel="Review score" itemValue="REVIEW_SCORE" />
							<f:selectItem itemLabel="Name(A-Z)" itemValue="NAME_A_TO_Z" />
							<p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
					</p:selectOneRadio>
				 </h:form>	
                </pm:content>
            </pm:page>
            
            <pm:page id="filterPage">
	           <pm:header title="Filters" swatch="b" styleClass="hmsHeader">
	                <p:button outcome="pm:hotelsListId?transition=flip"  value="Back" styleClass="ui-btn-left ui-btn-inline" onclick="makeFlagTrue()" />
	           </pm:header>
               <pm:content>
	           <p:selectBooleanCheckbox id="selectBooleanCheckbox" itemLabel="Only Deal" value="#{searchView.searchBean.filterBean.dealOnly}">
	                <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
	           </p:selectBooleanCheckbox>
               <p:accordionPanel id="filterIdnavi">
				    <p:tab title="Star Rating">
				       <h:panelGrid style="hight:200px">
				        <h:form>
							<p:rating value="#{searchView.searchBean.filterBean.starRating}" stars="5" onRate="#{searchView.search()}" >	
							  	 <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="rate" />
							</p:rating>
						</h:form>
					   </h:panelGrid>				  
                   </p:tab>
				    <p:tab title="Hotel Size">
				    		<h:form>
				            <p:selectOneRadio id="selectOneRadio" value="#{searchView.searchBean.filterBean.hotelSize}">
						        <f:selectItem itemLabel="1-50" itemValue="FIFTY" />
						        <f:selectItem itemLabel="51-150" itemValue="FIFTY_ONE_FIFTY" />
						        <f:selectItem itemLabel="151+" itemValue="MORE_THAN_ONE_FIFTY" />
						        <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
						    </p:selectOneRadio>
						    </h:form>
				    </p:tab>
				    <p:tab title="Facilities">
				         <h:form>
						 <p:selectManyCheckbox id="selectManyCheckbox" value="#{searchView.searchBean.filterBean.facilities}">
						        <f:selectItem itemLabel="Spa" itemValue="spa" />
						        <f:selectItem itemLabel="Wifi" itemValue="wifi" />
						        <f:selectItem itemLabel="Breakfast" itemValue="breakfast" />
						        <f:selectItem itemLabel="Pool" itemValue="pool" />
						        <f:selectItem itemLabel="Beach" itemValue="beach" />
						        <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
						  </p:selectManyCheckbox>	
						  </h:form>
				    </p:tab>
				</p:accordionPanel>
				
			    <p:commandButton value="Reset Filter" icon="search" actionListener="#{searchView.init()}" update=":hotelsListId , filterIdnavi"/>
                </pm:content>
            </pm:page>
            
            <pm:page id="dealView" lazy="true" >
               <pm:header title="#{dealView.dealData.deal.dealName}" swatch="b" styleClass="hmsHeader">
	                <p:button outcome="pm:hotelsListId?transition=flip"  value="Back" styleClass="ui-btn-left ui-btn-inline" onclick="makeFlagTrue()"/>
	           </pm:header>
	           
	             <pm:content>
            <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'/>
          
                
          		<h:form id="main">
                 <p:panel styleClass="noHeader hotelFullView">     
                    <p:outputPanel id="viewDealId" autoUpdate="true">
                      	    <p:commandLink value="Add to watch list" style="float:right" >
                      	    </p:commandLink>
                      	    <div class="row">
                      	    	<div class="thumbnail right-caption col-xs-12 fullView">
                      	    		<div class="boxHeader">
                      	    			<h:outputLabel value="#{dealView.dealData.hotel.name}" styleClass="offer"/>
                      	    			<h:outputLabel value="20 days left" styleClass="daysLeft"/>
                      	    		</div>
                      	    		 <div class="row">
		                      	    	<div class="col-xs-5" style="padding:0">
	                      	    			<img class="col-xs-12" src="#{dealView.dealData.hotel.hotelImage.filePath}" alt="..."/>
	                      	    		</div>
	                      	    		<div class="col-xs-6" style="margin-left:1em">
	                      	    			<p><b>#{dealView.dealData.availableForBooking}</b> Available/	
	                      	    			<p:commandLink  action="/deal/dealTransactions.xhtml?faces-redirect=true">                      	    			
	                      	    			    <b>#{dealView.dealData.alreadyBooked}</b> sold
	                      	    			</p:commandLink>
	                      	    			</p>
	                      	    			<div class="facilities row">
												<i class="fa fa-car"></i>
												<i class="fa fa-wifi"></i>
												<i class="fa fa-cutlery"></i>
												<i class="fa fa-plus-square"></i>
											</div>
											<div class="facilities row">
												<a class="like">
													<i class="fa fa-thumbs-up"></i>
													<p>46</p>
												</a>
												<a class="like">
													<i class="fa fa-thumbs-down"></i>
													<p style="padding-right: .2em;">10</p>
												</a>
											</div>
											<div class="star">
												<h:outputLabel value="#{searchView.getStar(dealView.dealData.hotel.starRating)}" escape="false"/>
											</div>
	                      	    		</div>
		                      	    </div>
		                      	    <div class="row" style="margin-top:0.5em;">
		                      	    	
		                      	    	<div class="col-xs-6">
		                      	    		<h:outputLabel value="Offer Details" style="margin-bottom:0;"/>
		                      	    	    <h:outputLabel value="#{dealView.liveDealCriterionsinHTML}" escape="false" styleClass="ofrLael"/>
		                      	    	</div>
		                      	    	<div class="col-xs-6" style="text-align:center;margin-top:1em;">
		                      	    		<b>Price</b>
		                      	    		<span class="del">
												<p:outputPanel rendered="#{dealView.dealData.currentPrice ne dealView.dealData.originalPrice}" autoUpdate="true"><h3 style="display:inline">$#{dealView.dealData.originalPrice}</h3></p:outputPanel>
											</span>
											<div>
												<p:outputPanel rendered="#{dealView.dealData.currentPrice ne dealView.dealData.originalPrice}" autoUpdate="true"><h4 style="display:inline">After #{dealView.dealData.afterDiscount}%:</h4></p:outputPanel>
												<h4 class="cost" style="display:inline">$#{dealView.dealData.currentPrice}</h4>/Room
											</div>
		                      	    	</div>
		                      	    </div>
		                      	    <div class="row">
		                      	    	<div class="col-xs-8">
		                      	    		<pm:field>
		                      	    			<p:outputLabel for="numRooms" value="No of Rooms" style="width: 50%;float: left;margin-top: .4em;"/>
										        <p:selectOneMenu id="numRooms" value="#{dealView.dealData.noOfRooms}">
										             <f:selectItems value="#{dealView.availableRooms}" />  
										             <p:ajax update="main" listener="#{dealView.fireNoOfRoomChangedAction()}"></p:ajax>
										        </p:selectOneMenu>
		                      	    		</pm:field>
		                      	    	</div>
		                      	    	<div class="col-xs-4" style="padding-top: .7em;">
		                      	    		<p:commandLink value="Buy" styleClass="btn btn-success" disabled="#{not searchView.dealView.buyButtonEnabled}"  action="#{searchView.buyAction()}" ajax="false"/>
		                      	    	</div>
		                      	    </div>
		                      	       <div class="row">
		                      	         <div style="font-family: 'Roboto Condensed', sans-serif !important;text-align: center;">
		                      	            Total Cost - $ #{searchView.dealView.dealData.totalCost} for #{searchView.dealView.dealData.totalDays} nights
		                      	         </div>
		                      	       </div>
                      	    	</div>
                      	    </div>
                     </p:outputPanel> 
                  </p:panel>
                </h:form>
            </pm:content>
            
           </pm:page>
    </h:body>
    
</html>